<template>
  <div class="users">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活码管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--*****************======= 活码页面========*********** -->
    <!--*****************======= 活码页面========*********** -->
    <!--*****************======= 活码页面========*********** -->
    <el-card class="box-card">
      <!-- 查询单条活码 -->

      <el-input
        style="width: 270px"
        v-model="value"
        clearable
        placeholder="请输入要查询的活码名称"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="seachactivecode"
        ></el-button>
      </el-input>

      <!-- 新增按钮 -->

      <el-button
        type="primary"
        @click="addactivecode"
        style="margin-left: 15px; margin-right: 15px; margin-bottom: 10px"
        >新增活码</el-button
      >

      <!-- 删除全部按钮 -->

      <el-button
        type="danger"
        style="margin-bottom: 10px"
        @click="deleteallcode"
        >删除全部活码</el-button
      >

      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" stripe fit>
        <el-table-column prop="shortid" label="二维码" align="center">
          <template slot-scope="scope" align="center">
            <div>
              <qriously :value="domain + '/' + scope.row.shortid" :size="130" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="url" align="center">
          <template slot-scope="scope">{{
            domain + "/" + scope.row.shortid
          }}</template>
        </el-table-column>
        <el-table-column
          prop="codename"
          label="名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="todayscann"
          label="展现量（每日统计）"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalscann"
          label="总展现量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="todayclick"
          label="点击量（每日统计）"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalclick"
          label="总点击量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="restrictedmode"
          label="单个子码扫描阀值"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="displaymode" label="显示模式" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.displaymode ? "逐个显示模式" : "随机显示模式" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="displaylimit" label="显示限制" align="center">
          <template slot-scope="scope">
            <div>
              {{
                !scope.row.displaylimit
                  ? "每个刷新都不一样"
                  : "一个ip显示同一个"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mode" label="显码模式" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.mode == "url" ? "url链接" : "账号显示" }}</div>
          </template>
        </el-table-column> -->
        <!-- 操作列 -->
        <el-table-column
          prop="deal"
          label="操作"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope" class="dealbtn">
            <!-- 子码管理 -->
            <el-button
              class="btn"
              type="warning"
              @click="childrencodeinto(scope.row)"
              >子码管理</el-button
            >

            <!-- 编辑活码 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑活码"
              placement="top"
            >
              <el-button
                class="btn"
                type="primary"
                @click="edithuoma(scope.row)"
                icon="el-icon-s-tools"
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除活码"
              placement="top"
            >
              <el-button
                class="btn"
                type="danger"
                icon="el-icon-delete"
                @click="deleteactivecode(scope.row._id)"
              ></el-button>
            </el-tooltip>
            <!-- 初始化 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="清零次数"
              placement="top"
            >
              <el-button
                class="btn"
                type="info"
                icon="el-icon-picture-outline-round"
                @click="deletemun(scope.row._id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        style="float: right"
        @current-change="sizechange"
        hide-on-single-page
      ></el-pagination>
      <br />
      <br />
    </el-card>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- 编辑活码 -->
    <el-dialog title="编辑活码" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="活码标题" prop="codename" required>
          <el-input v-model="form.codename"></el-input>
        </el-form-item>
        <!-- <el-form-item label="url" prop="url" required>
          <el-input v-model="form.url"></el-input>
        </el-form-item>-->
        <el-form-item label="单个子码扫描阀值" prop="restrictedmode" required>
          <el-input v-model="form.restrictedmode"></el-input>
        </el-form-item>
        <el-form-item label="显示模式" prop="displaymode" required>
          <el-radio-group v-model="form.displaymode">
            <el-radio :label="true">逐个显示模式</el-radio>
            <el-radio :label="false">随机显示模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示限制" prop="displaylimit" required>
          <el-radio-group v-model="form.displaylimit">
            <el-radio :label="true">一个ip显示同一个</el-radio>
            <el-radio :label="false">每个刷新都不一样</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显码模式" prop="mode" required>
          <el-radio-group v-model="form.mode">
            <el-radio :label="(mode = 'url')">跳转模式</el-radio>
            <el-radio :label="(mode = 'json')">账号显示</el-radio>
            <el-radio :label="(mode = 'html')">客服模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="子码类型" prop="mode" required>
          <el-radio-group v-model="form.types">
            <el-radio :label="(types = 'qq')">QQ</el-radio>
            <el-radio :label="(types = 'wx')">微信</el-radio>
            <el-radio :label="(types = 'wxgzh')">公众号</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editactivecode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getactivecode,
  setqrcode,
  getcodeall,
  delqrcode,
  allcode,
  putnum,
} from "../axios/api";
import _ from "lodash";
import { deletemodal, deletemul } from "../components/util";
import { getdomainlist } from "../axios/api";
export default {
  data() {
    return {
      tableData: [], //表格数据
      total: 0, //分页功能的总条数
      dialogVisible: false, //编辑活码状态
      form: {
        //form表单数据
        codename: "",
        displaymode: true,
        restrictedmode: 100,
        displaylimit: true,
        mode: "url",
        types: "qq",

        // url:"http://hm.59faka.com:9070/"
      },
      value: "", //查询活码值
      domain: "",
    };
  },
  created() {
    this.getcodelist();
    this.getdomainlist();
    document.addEventListener("keydown", this.watchEnter);
  },
  methods: {
    async deletemun(id) {
      const res = await deletemul();
      if (!res) return;
      let res1 = await putnum({ id });
      this.$message.success("清零成功");
      this.getcodelist();
    },
    sizechange(val) {
      this.getcodelist(val);
    },
    watchEnter(e) {
      var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
      if (keyNum == 13) {
        this.seachactivecode();
      }
    },
    async getdomainlist() {
      const res = await getdomainlist();
      if (res.status == 200) {
        if (res.data.data.length > 0) {
          this.domain = res.data.data[0].domain;
        } else {
          this.domain = this.$url;
        }

        console.log();
      }
    },
    //获取活码列表
    async getcodelist(page = 1) {
      let res = await getcodeall({ page });
      if (res.status == 201) {
        this.tableData = res.data.date;
        this.total = res.data.total;
      }
    },
    //新增活码
    addactivecode() {
      this.$router.push("/addactivecode");
    },
    //编辑活码
    edithuoma(record) {
      this.dialogVisible = true;
      this.form = {
        codename: record.codename,
        displaymode: record.displaymode,
        restrictedmode: record.restrictedmode,
        displaylimit: record.displaylimit,
        mode: record.mode,
        id: record._id,
        types: record.types,
      };
    },
    // 编辑活码后提交
    editactivecode() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const result = _.merge(this.form);
          result.restrictedmode = Number(result.restrictedmode);
          const res = await setqrcode(result);
          if (res.status == 201) {
            this.$message.success("修改活码成功");
            this.dialogVisible = false;
            this.getcodelist();
          }
        } else {
          return this.$message.error("请输入合法的数据");
        }
      });
    },
    //删除单条活码
    async deleteactivecode(id) {
      const res = await deletemodal();
      if (!res) return;
      const response = await delqrcode({ data: { id } });
      if (response.status == 200) {
        this.$message.success("删除活码成功");
        this.getcodelist();
      }
    },
    //删除全部活码
    async deleteallcode() {
      const res = await deletemodal();
      if (!res) return;
      const response = await allcode();
      if (response.status == 200) {
        this.$message.success("删除全部活码成功活码成功");
        this.getcodelist();
      }
    },
    //查询单条活码
    async seachactivecode() {
      const res = await getactivecode({ codename: this.value });
      if (res.status == 200) {
        this.tableData = res.data;
      }
    },
    //进入子码管理
    childrencodeinto(row) {
      this.$router.push({
        name: "childrencode",
        query: {
          id: row._id,
          mode: row.restrictedmode,
          codename: row.codename,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.btn {
  font-size: 10px;
  padding: 8px 15px;
}
</style>